<template>
  <div class="index">
    <el-container style="height: 100vh">
      <el-scrollbar style="height: 100%; width: 235px !important">
        <el-aside width="235px" style="background-color: #fff">
          <div class="aside_container">
            <img src="../assets/Snipaste_2021-12-20_09-25-57.png" alt="" />
            <div class="menu_container">
              <el-scrollbar style="height: 100%">
                <el-menu
                  style="width: 95%"
                  unique-opened
                  active-text-color="#FFC52F"
                >
                  <el-submenu index="1">
                    <template slot="title"
                      ><i class="el-icon-money"></i>财务管理</template
                    >
                    <el-menu-item index="1-1">费用科目管理</el-menu-item>
                    <el-menu-item index="1-2">门诊日结核对</el-menu-item>
                    <el-menu-item index="1-3">门诊科室工作量统计</el-menu-item>
                  </el-submenu>

                  <el-submenu index="2">
                    <template slot="title"
                      ><i class="el-icon-office-building"></i>挂号</template
                    >
                    <el-menu-item index="2-1">挂号</el-menu-item>
                    <el-menu-item index="2-2">现场挂号</el-menu-item>
                    <el-menu-item index="2-3">退号</el-menu-item>
                  </el-submenu>

                  <el-submenu index="3">
                    <template slot="title"
                      ><i class="el-icon-user"></i>医生门诊</template
                    >
                    <router-link to="/home/outpatient/prescription">
                      <el-menu-item index="3-1">成药处方</el-menu-item>
                    </router-link>
					<router-link to="/home/outpatient/solusion">
						<el-menu-item index="3-2">诊毕</el-menu-item>
					</router-link>
                    <router-link to="/home/outpatient/patientcostsnew">
                      <el-menu-item index="3-3">患者费用明细</el-menu-item>
                    </router-link>
                    <el-menu-item index="3-4">门诊病历</el-menu-item>
                    <el-menu-item index="3-5">检查申请</el-menu-item>
                    <el-menu-item index="3-6">门诊确认</el-menu-item>
                  </el-submenu>

                  <el-submenu index="4">
                    <template slot="title"
                      ><i class="el-icon-orange"></i>门诊药房</template
                    >
                    <router-link to="/home/pharmacy/dispatch">
                      <el-menu-item index="4-1">门诊发药</el-menu-item>
                    </router-link>
                    <router-link to="/home/pharmacy/withdrawal">
                      <el-menu-item index="4-2">门诊退药</el-menu-item>
                    </router-link>
                    <router-link to="/home/pharmacy/manage">
                      <el-menu-item index="4-3">药品目录管理</el-menu-item>
                    </router-link>
                  </el-submenu>

                  <el-submenu index="5">
                    <template slot="title"
                      ><i class="el-icon-data-analysis"></i>医技模块</template
                    >
                    <el-menu-item index="5-1">检查检验登记</el-menu-item>
                    <el-menu-item index="5-2">检查检验结果录入</el-menu-item>
                    <el-menu-item index="5-3">个人工作量登记</el-menu-item>
                  </el-submenu>
                </el-menu>
              </el-scrollbar>
            </div>
          </div>
        </el-aside>
      </el-scrollbar>
      <el-container style="width: 90%">
        <router-view></router-view>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// 引入css，推荐将css放入main入口中引入一次即可。

import { HappyScroll } from "vue-happy-scroll/src";

export default {
  name: "Index",
  data() {
    return {};
  },
  components: { HappyScroll },
};
</script>

<style scoped>
aside {
  position: relative;
  box-shadow: rgba(144, 142, 142, 0.13) 2px 0px 6px 0px;
}

.el-header {
  background-color: #f3f4f7;
  color: #333;
  line-height: 60px;
}

.el-main {
  background-color: #ffffff;
}

.el-menu {
  border-right: none !important;
}

.el-menu-item.is-active {
  background-color: #fff6e2 !important;
}

.el-submenu__title:focus {
  background-color: #fff6e2 !important;
}

.el-scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
}

.menu_container {
  width: 235px;
  height: 650px;
}

.aside_container {
  width: 235px;
  height: 100%;
}

.aside_container img {
  position: relative;
  width: 233px;
}

.aside_tool {
  width: 235px;
  height: 60px;
}
</style>


